import React, { useState } from 'react'
import style from './yqworks.module.css'
import WorksAll from './WorksAll';
import WorksOne from './WorksOne';
import WorksTwo from './WorksTwo';
import WorksThree from './WorksThree';
import WorksFour from './WorksFour';
import WorksFive from './WorksFive';
import WorksSix from './WorksSix';
import WorksSeven from './WorksSeven';
interface WorkTab {
    id: string;
    label: string;
    content: JSX.Element
}
function YQworksData() {
    const [workactive, setWorkActive] = useState('tab1')
    const [animate, setAnimate] = useState(false)
    const works: WorkTab[] = [
        { id: 'tab1', label: '全部', content: <WorksAll /> },
        { id: 'tab2', label: 'H5', content: <WorksOne /> },
        { id: 'tab3', label: '海报', content: <WorksTwo /> },
        { id: 'tab4', label: '长页', content: <WorksThree /> },
        { id: 'tab5', label: '表单', content: <WorksFour /> },
        { id: 'tab6', label: '互动', content: <WorksFive /> },
        { id: 'tab7', label: '电子画册', content: <WorksSix /> },
        { id: 'tab8', label: '视频', content: <WorksSeven /> }
    ]
    const goToNext = () => {
        setAnimate(true)
        setWorkActive(prev => {
            const currentIndex = works.findIndex(work => work.id === prev)
            return works[(currentIndex + 1) % works.length].id
        })
    }
    const goToPrevious = () => {
        setAnimate(true)
        setWorkActive(prev => {
            const currentIndex = works.findIndex(work => work.id === prev)
            return works[(currentIndex - 1 + works.length) % works.length].id
        })
    }
    return (
        <div className={style.container}>
            <h1>作品</h1>
            <div className={style.worksTab}>
                {works.map(workstab => (
                    <button
                        key={workstab.id}
                        className={workactive === workstab.id ? style.activeW : ''}
                        onClick={() => setWorkActive(workstab.id)}
                    >
                        {workstab.label}
                    </button>
                ))}
            </div>
            <button id={style.left} onClick={goToPrevious}>
                <span>&lt;</span>
            </button>
            <button id={style.right} onClick={goToNext}>
                <span>&gt;</span>
            </button>
            <div  className={`${style.content} ${animate? style.animate : ''}`}>{works.find(workstab => workstab.id === workactive)?.content}</div>

        </div>
    )
}

export default YQworksData
